<template>
	<div class="amap-page-container" :style="options.style">
		<el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="options.center" :zoom="options.zoom" :plugin="plugin" :events="eve" class="amap-demo">
			<el-amap-circle v-for="circle in options.circles" :center="circle.center" :radius="circle.radius" :fill-opacity="circle.fillOpacity" :events="circle.events"></el-amap-circle>
			<el-amap-marker v-for="(marker, index) in options.markers" :position="marker.position" :vid="index"></el-amap-marker>
		</el-amap>
	</div>
</template>

<script>
import VueAMap from 'vue-amap'
VueAMap.initAMapApiLoader({
	key: 'a71e050987038a29cf5f1ff0cfa9c142',
	plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],
	v: '1.4.4'
});
export default{
	props:{
		options:Object,
		require:true
	},
	data(){
		let amapManager = new VueAMap.AMapManager();
		return{
			amapManager,
			eve: {
				init: (o) => {
				  console.log(o.getCenter())
				  console.log(this.$refs.map.$$getInstance())
				  o.getCity(result => {
					console.log(result)
				  })
				},
				'moveend': () => {
				},
				'zoomchange': () => {
				},
				'click': (e) => {
				  // alert('map clicked');
				  console.log(e);
				}
			},
			plugin: ['ToolBar', {
				pName: 'MapType',
				defaultType: 0,
				events: {
					init(o) {
						console.log(o);
					}
				}
			}]
		}
	},
	created(){
		console.log(this.options);
	}
}
</script>

<style scoped="scoped">

</style>
